<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #f6f6f6;
        margin: 0;
        padding: 0;
      }
 
      .container {
        max-width: 600px;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }
 
      .header {
        text-align: center;
        margin-bottom: 20px;
        color: #8e9bf0;
      }
 
      .todo-form {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
 
      .todo-input {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 5px;
        margin-right: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
 
      .todo-button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #8e9bf0;
        color: #fff;
        cursor: pointer;
      }
 
      .todo-list {
        list-style: none;
        padding: 0;
      }
 
      .todo-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #e8e8e8;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
 
      .todo-item:last-child {
        margin-bottom: 0;
      }
 
      .todo-item-checkbox {
        margin-right: 10px;
      }
 
      .todo-item-text {
        flex: 1;
        color: #818491;
        font-weight: bold;
      }
 
      .todo-item-delete {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        background-color: #ff6b6b;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.3s;
      }
 
      .todo-item-delete:hover {
        background-color: #ff4f4f;
      }
 
      .buttons {
        display: flex; /* 使用弹性布局 */
        justify-content: space-between; /* 将按钮平均分布在容器内 */
        margin-top: 10px; /* 根据需要设置顶部间距 */
      }
 
      .buttons button {
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
        /* 撤销所有样式，只保留内边距和指针样式 */
        background-color: #fff;
        border: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="header">My Dos</h1>
      <form class="todo-form" id="todoForm">
        <input
          type="text"
          class="todo-input"
          placeholder="i do ..."
          id="todoInput"
        />
        <button type="submit" class="todo-button">Add</button>
      </form>
    </div>
 
    <div class="container">
      <ul class="todo-list" id="todoList"></ul>
      <div class="buttons">
        <button onclick="selectAll()">selected all</button>
        <button><span id="notCompletedCount">0</span>&nbsp;not finish</button>
        <button onclick="deleteSelected()">Delete selected</button>
      </div>
    </div>
 
    <script>
      const todoForm = document.getElementById("todoForm");
      const todoList = document.getElementById("todoList");
      const todoInput = document.getElementById("todoInput");
      const notCompletedCount = document.getElementById("notCompletedCount");
 
      function createToDoItem(text) {
        const li = document.createElement("li");
        li.className = "todo-item";
        li.innerHTML = `
         <input type="checkbox" class="todo-item-checkbox">
         <span class="todo-item-text">${text}</span>
         <button class="todo-item-delete">Delete</button>
       `;
        countNotCompleted();
        return li;
      }
 
      // 在任务列表每次变化时，也需要调用更新函数
      todoForm.onsubmit = function (event) {
        event.preventDefault();
        const todoText = todoInput.value.trim();
        if (!todoText) return;
        const li = createToDoItem(todoText);
        todoList.appendChild(li);
        todoInput.value = "";
 
        // 新增任务后更新未完成任务数量
        countNotCompleted();
      };
      function selectAll() {
        const checkboxes = todoList.querySelectorAll(".todo-item-checkbox");
        checkboxes.forEach((checkbox) => {
          checkbox.checked = true;
        });
 
        // 调用函数计算未完成任务数量
        countNotCompleted();
      }
 
      //计算未完成任务数量
      function countNotCompleted() {
        const todoItems = document.querySelectorAll(".todo-item");
        let notCompleted = 0;
 
        todoItems.forEach((item) => {
          const checkbox = item.querySelector(".todo-item-checkbox");
          if (!checkbox.checked) {
            notCompleted++;
          }
        });
        // 更新页面上的显示数量
        notCompletedCount.textContent = notCompleted;
      }
 
      //选择的选项删除
      function deleteSelected() {
        const items = todoList.querySelectorAll(".todo-item");
        items.forEach((item) => {
          const checkbox = item.querySelector(".todo-item-checkbox");
          if (checkbox.checked) {
            item.remove();
          }
        });
      }
 
      todoList.onclick = function (event) {
        countNotCompleted();
        if (
          event.target.className === "todo-item-delete" &&
          confirm("你确定要删除它吗？")
        ) {
          event.target.parentNode.remove();
        }
        countNotCompleted();
      };
    </script>
  </body>
</html>